<template>
  <div class="Porder">
    <Pheader class="tou" msg="我的订单" />
      <div class="nav">
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部" name="first">
            <!-- <div class="close">
                <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="关闭" msd="1" mse="￥105.0元">
                </Pproduct>
                <div class="caozuo">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="删除订单" />
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="待付款" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo" style="top:30%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 30px; margin-top:10%;" msg="去支付" />
                    <Pbutton class="Pbutton" style="padding:3px 20px; margin-top:10%; background:grey" msg="取消订单"/>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="待发货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="申请退款" />
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="已发货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:30%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="确认收货" />
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%; background:grey;" msg="查看物流"/> 
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="已收货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:20%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="申请退款" />
                    <router-link to="/P_order/P_orderpingjia">
                      <Pbutton class="Pbutton" style="padding:3px 25px; margin-top:10%;background:grey;" msg="去评价"/>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%; " msg="交易完成"/> 
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="申请退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款失败" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 8px; font-size:14px; margin-top:10%; " msg="申请平台介入"/>  
                  </p>
                </div>
            </div> -->
            <div class="kong clear" style="height:270px;">
              <div style="margin-top:120px">
                  <div class="i1" style="float:left;margin-left:38%;margin-right:2%;color: #ccc;"><i class="fa fa-file-text-o fa-5x"></i></div>
                  <div>
                    <p>你还没有订单哦！</p>
                    <Pbutton msg="去首页看看" @click="fun1"></Pbutton>
                  </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="second">
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="待付款" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo" style="top:30%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 30px; margin-top:10%;" msg="去支付" />
                    <Pbutton class="Pbutton" style="padding:3px 20px; margin-top:10%; background:grey" msg="取消订单"/>
                  </p>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待发货" name="third">
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="待发货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="申请退款" />
                  </p>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待收货" name="fourth">
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="已发货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:30%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="确认收货" />
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%; background:grey;" msg="查看物流"/> 
                  </p>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待评价" name="fifth">
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="已收货" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:20%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="申请退款" />
                    <router-link to="/P_order/P_orderpingjia">
                      <Pbutton class="Pbutton" style="padding:3px 25px; margin-top:10%;background:grey;" msg="去评价"/>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%; " msg="交易完成"/> 
                  </p>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="退款/售后" name="sixth">
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="申请退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款中" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                  </p>
                </div>
            </div>
            <div class="close">
              <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="退款失败" msd="1" mse="￥105.0元"></Pproduct>
              <div class="caozuo"  style="top:48%;">
                  <p class="click">
                    <router-link to="/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 8px; font-size:14px; margin-top:10%; " msg="申请平台介入"/>  
                  </p>
                </div>
              </div>
          </el-tab-pane>
          <el-tab-pane label="已完成/关闭" name="seventh">
          <div class="close">
                <Pproduct class="Pproduct" msg="1503035050" msn="2020/2/8 16:24" mss="关闭" msd="1" mse="￥105.0元">
                </Pproduct>
                <div class="caozuo">
                  <p class="click">
                    <router-link to="/home/P_order/P_orderdetail">
                      <p style="margin-left:15px;">查看详情</p>
                    </router-link>
                    <Pbutton class="Pbutton" style="padding:3px 15px; margin-top:10%;" msg="删除订单" />
                  </p>
                </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <router-link to>
          <span class="huishou">订单回收站</span>
        </router-link>
      </div>
    <div class="rightCon2">
           <router-view/>
    </div>
  </div>
</template>
<script>
import Pheader from "@/components/P_header.vue";
import Pproduct from "@/components/P_product.vue";
import Pbutton from "@/components/P_button.vue";

export default {
  name: "order",
  components: {
     Pbutton,
    Pproduct,
    Pheader
  },
  data() {
    return {
      activeName: "second"
    };
  },
  methods: {
    fun1() {
      alert("去首页看看")
    }
  }
};
</script>
<style scoped>
/* .Porder{
  margin-left:-12px;
} */
.Porder .tou {
  padding: 12px 13px;
  border-bottom: 1px solid #e7e7e7;
}
.Porder .nav {
  width: 97%;
  margin-left: 1.5%;
  position: relative;
}
.Porder .nav .huishou {
  position: absolute;
  top: 10px;
  left: 90%;
}
/* .Porder .nav .Pproduct{
    margin-bottom: 20px;
} */
.Porder .close{
  position: relative;
  /* width:18%; */
  /* top:0;
  left:0;
  right: 0;
  bottom: 0; */
}
.Porder .close .caozuo{ 
  position: absolute;
  top:40%;
  left:84%;
  /* right: 0;
  bottom: 0; */
  /* margin: auto; */
}
.Porder {
  width: 100%;
  /* height: 544px; */
  border: 1px solid #e7e7e7;
  margin-left: 0.5%;
  position: relative;
}
.Porder .rightCon2{
  position: absolute;
  top:0px;
  left:0px;
}
</style>